<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="/static/lib/layuiadmin/plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/static/lib/layuiadmin/css/global.css" media="all">
    <link rel="stylesheet" href="/static/lib/layuiadmin/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/lib/layuiadmin/css/table.css" />
    <style>
        #content{text-align: center;}
        #content td img{max-width: 100%;}
    </style>
</head>

<body>
<div class="admin-main">

    <blockquote class="layui-elem-quote">
        当前产品:<span style="color:red;"><{$product.name}></span>
    </blockquote>
    <fieldset class="layui-elem-field">
        <legend>产品详情</legend>
        <div class="layui-field-box layui-form">
            <table class="layui-table admin-table">
                <thead>
                <tr>
                    <th>配图</th>
                    <th>内容</th>
                    <th>文字标题颜色</th>
                    <th>文字颜色</th>
                    <th>背景颜色</th>
                    <th>模板</th>

                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="content">

                <{volist name="productData.content" id="item"}>
                <tr>
                    <td data-type="src">
                        <img src="<{$item.src}>" />
                    </td>
                    <td data-type="content">
                        <ul>


                            <{php}>
                                foreach($item['content'] as $kk => $vv ){
                                    echo "<li>".$vv."</li>";
                                }
                            <{/php}>


                        </ul>
                    </td>
                    <td data-type="titlecolor" style="background: <{if condition="(isset($item.titlecolor))"}><{$item.titlecolor}><{else /}>#333<{/if}>"> <{if condition="(isset($item.titlecolor))"}><{$item.titlecolor}><{else /}><{/if}></td>
                    <td data-type="color" style="background: <{if condition="(isset($item.color))"}><{$item.color}><{else /}>#333<{/if}>"> <{if condition="(isset($item.color))"}><{$item.color}><{else /}><{/if}></td>
                    <td data-type="backgroundcolor" style="background: <{if condition="(isset($item.backgroundcolor))"}><{$item.backgroundcolor}><{else /}>#fff<{/if}>" > <{if condition="(isset($item.backgroundcolor))"}><{$item.backgroundcolor}><{else /}><{/if}></td>
                    <td data-type="tpl" data-val="<{$item.tpl}>">
                        <{php}>echo $tool->transProductTpl($item['tpl']);<{/php}>
                    </td>
                    <td>
                        <a href="javascript:;"  data-opt="del" class="layui-btn layui-btn-success layui-btn-mini edit">编辑</a>
                        <a href="javascript:;"  data-opt="del" class="layui-btn layui-btn-danger layui-btn-mini delete">删除</a>
                    </td>
                </tr>
                <{/volist}>
                </tbody>
            </table>
        </div>
    </fieldset>

    <div>
        <a href="javascript:;" class="layui-btn" id="add" >添加项</a><a href="javascript:;" class="layui-btn" id="save" >保存</a>
        <a href="/admin/product_data/index/id/<{$productData.productid}>" class="layui-btn layui-btn-danger"  >返回上级</a>
    </div>
    <div class="page"></div>

</div>

<script type="text/javascript" src="/static/lib/layuiadmin/plugins/layui/layui.js"></script>
<script>
    layui.config({
        base: '/static/lib/layuiadmin/js/'
    });

    layui.use('layer',function(){
        var layer = layui.layer;
        var $ = layui.jquery;
        var allData = [];

        $("#save").click(function(){
            collectData();
            var content = JSON.stringify(allData);
            $.post('/admin/product_data/updateContent',{productDataId:'<{$productData.id}>',content:content},function(data){
                console.log(data);
            });
        });

        $("#content").delegate(".delete",'click',function(){
           $(this).parent().parent().remove();
           collectData();
        });

        //编辑
        var giveToEditItem = {};
        $("#content").delegate(".edit",'click',function(){
            var $tr = ($(this).parent().parent());
            var index = $("#content tr").index($tr);
            giveToEditItem = allData[index];
            //console.log(giveToEditItem);
            window.giveToEditItem = giveToEditItem;
            window.giveToEditItemIndex = index;
            //传递相应的数据到编辑的页面
            layer.open({
             type:2,
             area:['800px','800px'],
             maxmin:true,
             content:'/admin/product_data/editItem'
             }) ;

        });

        //[["content"=>['标题','内容','标题','内容'],"src"=>"",'tpl'=>'模板标志'],[...],[...]]
        //重新获取当前的数据
        function collectData(){
            allData = [];
            $("tr","#content").each(function(index,item){
                allData.push(parseTr(item));
            });
            console.log(allData);
        }
        function parseTr(tr){
            var data = {};
            $("td",tr).each(function(index,item){
                var type = $(this).data('type');
                if(type == 'src'){
                    data.src = $('img',this).attr('src').trim();
                }else if(type == 'content'){
                    data.content = [];
                    $("li",this).each(function(i,v){
                        data.content.push($(v).html().trim());
                    });
                }else if(type == 'color'){
                    data.color = $(this).html().trim();
                }else if(type == 'backgroundcolor'){
                    data.backgroundcolor = $(this).html().trim();
                }else if(type=="titlecolor"){
                    data.titlecolor = $(this).html().trim();
                }else if(type == 'tpl'){
                    //data.tpl = $(this).html().trim();
                    data.tpl = $(this).data('val');
                }
            });
            //console.log(data);
            return data;
        }

        collectData();


        $("#add").click(function(){
           layer.open({
               type:2,
               area:['800px','800px'],
               maxmin:true,
               content:'/admin/product_data/addItem'// 其实数据是通过js返回到当前的frame中的吧 所以应该不需要这个东西  但是我们需要一个独立的页面来编辑 以免产生打扰
           }) ;
        });

        /**
         * 处理返回来的数据 这个函数是由内联框架调用的
         */
        function addContent(data){
            var html = createHtmlByData(data);
            $("#content").append(html);
            collectData();
        }


        /**
         *
         *编辑对应项目的数据 这个函数是由内联框架调用的
         */
        function editContent(data,index){
            var html = createHtmlByData(data);
            $("#content tr").eq(index).replaceWith(html);
            collectData();
        }

        function createHtmlByData(data){
            var htmlHead = '<tr> \
                                <td data-type="src">\
                                    <img src="'+data.cover+'" />\
                                </td>';

            var index = 0;
            var liStr = '';
            for(var s in data){
                if(/title-\d/.test(s)){

                    index = s.replace('title-','');
                    liStr += '<li>'+data['title-'+index]+'</li>';
                    liStr += '<li>'+data['desc-'+index]+'</li>';
                }
            }

            var htmlBody = '<td data-type="content">\
                                <ul>\
                                    '+liStr+'\
                                </ul>\
                            </td>\
                            <td data-type="titlecolor" style="background: '+data.titlecolor+'">'+data.titlecolor+'</td>\
                            <td data-type="color" style="background: '+data.color+'">'+data.color+'</td>\
                            <td data-type="backgroundcolor" style="background: '+data.backgroundcolor+'">'+data.backgroundcolor+'</td>\
                            ';
            var htmlFoot = '    <td data-type="tpl" data-val="'+data.tpl+'">\
                                    '+transTpl(data.tpl)+'\
                                </td>\
                                <td>\
                                    <a href="javascript:;"  data-opt="del" class="layui-btn layui-btn-success layui-btn-mini edit">编辑</a>\
                                    <a href="javascript:;"  data-opt="del" class="layui-btn layui-btn-danger layui-btn-mini delete">删除</a> \
                                </td>\
                            </tr>';
            return  htmlHead+htmlBody+htmlFoot;

        }

        /**
         * 显示tpl的中文名称
         * @param tpl
         */
        function transTpl(tpl){
            var tplData = {
                'imgleft':'图片居左',
                'imgright':'图片居右',
                'imgcenter':'图片居中',
                'imgback':'图片背景文字居中',
                'imgbackleft':'图片背景文字靠左',
                'imgbackright':'图片背景文字靠右'
            };
            return tplData[tpl];
        }

        window.addContent = addContent;
        window.editContent = editContent;

    });




</script>
</body>

</html>